/**
* @desc:  设备升级
* @author qiankui
* @date 2023-4-15 15:36:58
*/
<template>
    <div class="page-container h-100">
        <div class="wrapperform m-b-16">
            <div class="searchbox">
                <el-form ref="form"  :inline="true" :model="form" class="demo-form-inline">
                    <!--设备类型-->
                    <el-form-item :label="this.i18n.t('Device type')" prop="deviceType">
                        <el-select id="deviceType" v-model="form.deviceType" :placeholder="this.i18n.t('Please select the device type')">
                            <el-option :label="$t(item.label)" :value="item.value" v-for="(item,index) in devOptions"
                                       :key="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--发布日期-->
                    <el-form-item :label="this.i18n.t('Release date')" prop="createTime">
                        <el-date-picker
                                v-model="form.createTime"
                                type="daterange"
                                align="right"
                                format="yyyy-MM-dd"
                                range-separator="~"
                                :start-placeholder="this.i18n.t('Start Date')"
                                :end-placeholder="this.i18n.t('End Date')"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="BlankPlaceholder formOperationButtons" label=".">
                        <!--查询-->
                        <el-button size="small" type="primary" class="topBtn" @click="onSearch">{{this.i18n.t('Query')}}</el-button>
                        <!--重置-->
                        <el-button size="small" type="handle" class="topBtn" @click="resetSearch">{{this.i18n.t('Reset')}}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

      <div class=" table-box globalDiv">
        <el-table
            class="devList"
            stripe
            ref="multipleTable"

            height="calc(100vh - 305px)"
            :data="tableData"
            @selection-change=""
            style="width: 100%">
<!--          <el-table-column-->
<!--              type="selection"-->
<!--              width="55">-->
<!--          </el-table-column>-->
          <!--          设备名称-->
          <el-table-column
              show-overflow-tooltip
              prop="deviceName"
              :label="$t('Device name')">
            <template slot-scope="scope">
              <span>{{scope.row.deviceNames||'-'}}</span>
            </template>
          </el-table-column>
          <!--          设备类型-->
          <el-table-column
              prop="address"
              :label="$t('Device type')">
            <template slot-scope="scope">
              <span>{{$t(devOptions[scope.row.deviceType].label)}}</span>
            </template>
          </el-table-column>
          <!--          升级类型-->
          <el-table-column
              show-overflow-tooltip
              prop="upgradeType"
              :label="$t('Upgrade type')">
            <template slot-scope="scope">
              <span>{{$t(deviceUpdateTypeList[scope.row.upgradeType].label)}}</span>
            </template>
          </el-table-column>

          <!--          状态-->
          <el-table-column
              show-overflow-tooltip
              prop="upgradeType"
              label="状态">
            <template slot-scope="scope">
              <span class="StatusText" :class="scope.row.state == 1?'successStatusText':scope.row.state == 2?'failStatusText':'primaryStatusText'">
            {{updataStateFilter(scope.row.state)}}
          </span>
            </template>
          </el-table-column>
          <!--          版本号-->
          <el-table-column
              show-overflow-tooltip
              prop="version"
              :label="$t('Version number')">
            <template slot-scope="scope">
              <span>{{scope.row.version||'-'}}</span>
            </template>
          </el-table-column>
          <!--          升级进度-->
          <el-table-column
              show-overflow-tooltip
              prop="progress"
              :label="$t('Upgrade progress')">
            <template slot-scope="scope">
              <span>{{scope.row.progress===null||scope.row.progress===undefined?'-':scope.row.progress}}</span>
            </template>
          </el-table-column>
          <!--          创建人-->
          <el-table-column
              show-overflow-tooltip
              prop="createBy"
              :label="$t('founder')">
            <template slot-scope="scope">
              <span>{{scope.row.createBy||'-'}}</span>
            </template>
          </el-table-column>
          <!--          发布时间-->
          <el-table-column
              show-overflow-tooltip
              prop="createTime"
              :label="$t('Release time')">
            <template slot-scope="scope">
              <span>{{scope.row.createTime||'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column
              class="tableRightTool"
              label="操作"
              width="100">
            <template slot-scope="scope" class="tableRightIcon">
              <el-link icon="iconfont-KUI icon-eye" type="primary" title="查看" :underline="false"  @click="checkFn(scope.row)"></el-link>
              <el-link icon="iconfont-KUI icon-reply" type="primary" title="重发" :underline="false" @click="retransmission(scope.row)"></el-link>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 20px">
          <el-button size="small" icon="iconfont-KUI icon-plus-circle tableBottomToolIcon" @click="addTableData">添加</el-button>
          <el-pagination
              style="display: inline-block;float: right"
              small
              background
              :pager-count="5"
              @size-change="handleSizeChange"
              @current-change="handleRightCurrentChange"
              :current-page.sync="form.pageNumber"
              :page-size="form.pageSize"
              layout="sizes,total, prev, pager, next, jumper"
              :total="formPageTabletotal"
              :page-sizes="[10, 20, 50, 100]"
          ></el-pagination>
        </div>
      </div>
        <check :updataStateFilterFn="updataStateFilter" :editTableRow='editTableRow' :checkFlag.sync='checkFlag' v-if='checkFlag'></check>
        <addViewEdit ref='addViewEdit' :dialogType="dialogType" :editTableRow='editTableRow'
                     :addViewEditFlag.sync='addViewEditFlag' v-if='addViewEditFlag'></addViewEdit>
    </div>
</template>

<script>
    import {deviceTypeList, deviceUpdateType,deviceUpdateStatus} from '@/assets/common/js/utils/deviceConfig.js'
    import {deviceversionGetlist,deviceversionRetrysend} from '@/api/pcmj/sbsj'
    import {deleteDocument} from "../../../api/document";
    import check from './check.vue';
    // 引入新增修改弹框
    import addViewEdit from './addViewEdit.vue'
    import i18n from "@/lang";

    export default {
        name: "sbsj_index",
        components: {
            addViewEdit,
          check
        },
        props: {},
      filters:{

      },
        data() {
            return {
              checkFlag:false,
              deviceUpdateTypeList:[],
              formPageTabletotal:0,
                regDate: '',
                dialogType: '',
                value2: '',
                pickerOptions: {
                    shortcuts: [{
                        // 最近一周
                        text: this.i18n.t('Last week'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        // 最近一个月
                        text: this.i18n.t('Last month'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        // 最近三个月
                        text: this.i18n.t('Last three months'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                devOptions: [],
                form: {
                    deviceType: null,
                    createTime: null,
                    endTime:null,
                    startTime:null,
                    pageNumber:1,
                    pageSize:10,
                },
                selectRow: [],
                editTableRow: null,
                detailFlag: false,
                addViewEditFlag: false,
              tableData:[],

            };
        },
        computed: {},
        watch: {},
        mounted() {
            console.log(deviceTypeList);
            this.devOptions = deviceTypeList
            this.deviceUpdateTypeList = deviceUpdateType
            this.onSearch()
        },
        methods: {
          updataStateFilter(val){
            console.log('值',val);
            var res=""
            deviceUpdateStatus.map(item=>{
              if (item.value==val){
                res=item.label
              }
            })
            console.log('jieguo',res);
            if (res){
              return i18n.t(res)
            }else{
              return '-'
            }
          },
          checkFn(row){
            this.editTableRow=row
            this.checkFlag=true
          },
          deviceversionRetrysend(params){
            deviceversionRetrysend(params).then(res=>{
              if (res.code==200){
                // 操作成功
                this.W.$tips("success", this.i18n.t("Operation successful"));
                this.onSearch()
              }
            }).catch().finally()
          },
          retransmission(row){
            this.W.$myConfirm('warning', "是否对升级失败的任务进行重发？")
                .then(async () => {
                  this.deviceversionRetrysend({VersionId:row.id})
                })
                .catch(() => {
                });

          },
          handleRightCurrentChange(val) {
            this.form.pageNumber = val;
            this.onSearch()
          },
          handleSizeChange(val) {
            this.form.pageSize = val
            // this.filterImgToBase64()
            console.log(`每页 ${val} 条`);
            this.onSearch()
          },
          deviceversionGetlist(params){
            deviceversionGetlist(params).then((res) => {
              if (res.code == 200) {
                this.formPageTabletotal=res.data.totalCount
                // res.data.values[0].state=0
                this.tableData=res.data.values
                // this.$refs.globalTable.loading_data()
              }
            }).catch().finally(() => {

            })
          },
            resetSearch() {
                this.form.deviceType=null
                this.form.createTime=null
                this.$refs.globalTable.loading_data();
            },
            onSearch() {
                console.log(this.form);
                if(this.form.deviceType==null){
                    this.form.deviceType=null
                }
                if(this.form.createTime){
                    var formatStr="yyyy-MM-dd"
                    this.form.startTime=new Date(this.form.createTime[0]).format(formatStr)+' 00:00:00'
                    this.form.endTime=new Date(this.form.createTime[1]).format(formatStr)+' 23:59:59'
                }else{
                    this.form.createTime=null
                    this.form.startTime=null
                    this.form.endTime=null
                }
                this.$nextTick(() => {
                  this.deviceversionGetlist(this.form)
                    // this.$refs.globalTable.loading_data(this.form);
                });
                // this.W.$tips('warning', '未实现');
            },

            // 获取表格数据
            getTableData() {
                this.$nextTick(() => {
                    this.$refs.globalTable.loading_data(this.form);
                });
            },

            /**
             * @description  添加表格
             * @param {row}: Object 点击项数据
             **/
            addTableData() {
                if (!this.isElectron){
                    // 请在桌面端操作
                    this.W.$tips("warning", this.i18n.t("Please operate on the desktop!"));
                    return
                }
                this.dialogType = 'add';
                this.editTableRow = null;
                this.addViewEditFlag = true;
            },
            /**
             * @param arr:{data} --当前行数据
             * @return: not
             * 表格查看的回调
             */
            handelDetail(data) {
                console.log(data);
                this.dialogType = 'view';
                this.editTableRow = data;
                this.addViewEditFlag = true;
            },
            // 表格删除回调
            delTableData(row) {
                console.log(row);
                // 确认删除？
                this.W.$myConfirm('warning',  this.i18n.t("Are you sure you want to delete it"))
                    .then(async () => {
                        let res = await deleteDocument({id: row.id});
                        if (res.code == 200) {
                            // 删除成功
                            this.W.$tips("success",  this.i18n.t("Successfully deleted"));
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                    });
            },
            //  表格修改回调
            handleEdit(row) {
                this.dialogType = 'edit';
                this.addViewEditFlag = true;
                this.editTableRow = row;
                console.log('row',this.editTableRow);
            },
        },
    };
</script>

<style scoped lang="scss">
    .right-height {
        height: calc(100% - 36px);
    }

    ::v-deep .content-width .el-form.wrapperform-box .el-form-item {
        width: calc((100% - 100px) / 3);
    }
    ::v-deep #deviceType{
        width: 320px !important;
    }
    .topBtn {
        padding: 9px 20px;
    }
    ::v-deep .iconfont-KUI {
        margin-right: 5px;
    }
</style>
